import {useState, useImperativeHandle, forwardRef} from "react";

const childStyle = {
    height: '110px',
    width: '400px',
    border: '1px solid #eea2a4'
}
const Child = forwardRef((props, ref) => {
    let [count, setCount] = useState(0)

    // 自定义暴露给父组件的实例值 (useImperativeHandle 要配合 forwardRef使用)
    useImperativeHandle(ref, () => ({
        // 暴露函数给父组件调用
        onChange,
        // 也可以暴露子组件的状态值给父组件使用
    }));

    // 定义子组件的事件
    const onChange = () => {
        setCount(count = count + 100);
    };

    const addCount = () => {
        setCount(count = count + 1)
        // 往子组件的props上添加一个getCount方法
        props.getCount(count++)
    }
    return(
        <div style={childStyle}>
            子组件：
            <p>获取父组件传过来的值：{props.name}</p>
            <button onClick={addCount}>点击改变子组件的value值：{count}</button>
        </div>
    )
})

export default Child